<html>

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>创建表单</title>
    <style>
        form {
            font: 1em sans-serif;
            max-width: 320px;
        }

        p>label {
            display: block;
        }

        input[type="text"],
        input[type="email"],
        input[type="number"],
        textarea,
        fieldset {
            width: 100%;
            border: 1px solid #333;
            box-sizing: border-box;
        }

        input:invalid {
            box-shadow: 0 0 5px 1px red;
        }

        input:focus:invalid {
            box-shadow: none;
        }
    </style>
</head>

<body>
    <form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
        <input type="range" name="b" value="50" /> +
        <input type="number" name="a" value="10" /> =
        <output name="result"></output>
    </form>
</body>

</html>